import React from 'react'
import ReactDom from 'react-dom'

// export default class DemoHooks extends React.Component {
//     state = {
//         count: 0,
//         name: '小明'
//     }

//     inpRef = React.createRef()

//     add = () => {
//         this.setState((state) => ({count: state.count+1}))
//     }

//     componentDidMount() {
//         this.timer = setInterval(() => {
//             this.setState(state => ({count: state.count+1}))
//         }, 1000);
//     }

//     show = () => {
//         alert(this.inpRef.current.value)
//     }

//     changeName = () => {
//         const {name} = this.state
//         if (name === '小明') {
//             this.setState(state => state.name = '小军')
//         } else {
//             this.setState(state => state.name = '小明')
//         }
//     }

//     unmount = () => {
//         ReactDom.unmountComponentAtNode(document.getElementById('root'))
//     }

//     componentWillUnmount() {
//         clearInterval(this.timer)
//     }

//     render() {
//         const {count, name} = this.state
//         return (
//             <div>
//                 <h2>当前求和为：{count}</h2>
//                 <h2>当前游客为：{name}</h2>
//                 <input type="text" ref={this.inpRef}/>
//                 <button onClick={this.add}>+1</button>
//                 <button onClick={this.changeName}>改名</button>
//                 <button onClick={this.show}>提示</button>
//                 <button onClick={this.unmount}>卸载组件</button>
//             </div>
//         )
//     }
// }

export default function DemoHooks() {
    // 可以理解为在state中开辟一个存储变量的属性，以及操作这个属性的方法
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState('小明')
    const inpRef = React.useRef()

    // 没传第二个参数表示检测所有人，[]表示谁也不检测，[a]表示检测a
    // React.useEffect这个函数相当于componentDidMount和componentDidUpdate
    // React.useEffect这个函数返回的函数相当于componentWillUnmount
    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count+1)
        }, 1000);
        return () => {
            clearInterval(timer)
        }
    }, [])

    function add() {
        // setCount(count+1)
        // 类似于setState的函数式写法
        setCount(count => count+1)
    }

    function changeName() {
        if (name === '小明') {
            setName(name => (name = '小军'))
        }else {
            setName(name => (name = '小明'))
        }
    }

    function show() {
        alert(inpRef.current.value)
    }

    function unmount() {
        ReactDom.unmountComponentAtNode(document.getElementById('root'))
    }

    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <h2>当前游客为：{name}</h2>
            <input type="text" ref={inpRef}/>
            <button onClick={add}>+1</button>
            <button onClick={changeName}>改名</button>
            <button onClick={show}>提示</button>
            <button onClick={unmount}>卸载组件</button>
        </div>
    )
}